<template>
  <div class="xhykButtonGroup">
    <template v-for="(bnItem,index) in bnList" :key="index">
      <xhyk-button class="bnItem" @click="bnItem.click(bnItem)"
                   :class="{normal: index != 0 && index != bnList.length - 1,firstBn: index == 0,lastBn: index == bnList.length - 1}"
                   v-if="bnItem.isMenu != true" v-bind="bnItem">
        <slot :name="bnItem.slot" :item="bnItem">
          {{ bnItem.label }}
        </slot>
      </xhyk-button>
      <xhyk-dropdown v-else v-bind="bnItem" class="bnItem"
                     :class="{normal: index != 0 && index != bnList.length - 1,firstBn: index == 0,lastBn: index == bnList.length - 1}"
                     :other-query="bnItem.otherQuery==undefined?bnItem:bnItem.otherQuery">
        <slot :name="bnItem.slot" :item="bnItem"/>

        <template v-for="slotName in slotList" :key="slotName" v-slot:[slotName]="{model,item}">
          <slot :name="slotName" :item="item"/>
        </template>

      </xhyk-dropdown>
    </template>
  </div>
</template>

<script setup>
import {watch, ref} from 'vue'
import XhykButton from './xhykButton.vue'
import XhykDropdown from './xhykDropdown.vue'


const props = defineProps({
  bnList: {
    type: Object,
    default: [
      {label: '下拉菜单', isMenu: true}
    ]
  },
})

const slotList = ref([])

watch(() => props.bnList, (newV, oldV) => {
  (newV || []).forEach(row => {
    if (typeof row.click != 'function'){
      row.click = function (item) {}
    }
    if (row.isMenu) {
      if (row.afterIcon == undefined) {
        row.afterIcon = 'ArrowDown'
      }
      (row.list || []).forEach(item => {
        if (item.slot) {
          slotList.value.push(item.slot)
        }
      })
    }
  })
}, {immediate: true, deep: true})

</script>

<style scoped lang='scss'>
.isNormal {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  margin: 0px !important;
}

.normal {
  @extend .isNormal;
  border-left-color: var(--el-button-divide-border-color);
  border-right-color: var(--el-button-divide-border-color);
  :deep(.myButtonX) {
    @extend .isNormal;
  }
}

.isFirst {
  border-top-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 0px;
  margin-right: 0px;
  border-right-color: var(--el-button-divide-border-color);
}

.firstBn {
  @extend .isFirst;

  :deep(.myButtonX) {
    @extend .isFirst;
  }
}

.isLast {
  border-top-right-radius: 4px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0px;
  margin-left: 0px;
  border-left-color: var(--el-button-divide-border-color);
}

.lastBn {
  @extend .isLast;

  :deep(.myButtonX) {
    @extend .isLast;
  }
}
</style>
